<template>
  <div class="baseedit content_base">
      <h2>修改圩堤基本信息</h2>
      <el-form ref='editForm' :model="editForm" style="width:90%" class='clearfix' label-position='left' :rules="rules"  status-icon  >
         <el-form-item label='圩堤名称：'  class="conWidth" >
           <div class="Wid">{{editForm.dikeName}}</div>
           </el-form-item>
           <el-form-item label="所在设区市（含省直管县）:" class="conWidth">
             <div class="Wid">{{editForm.city}}</div>   
           </el-form-item>
           <el-form-item label="所在县（市，区）:"  class="conWidth">
             <div class="Wid">{{editForm.county}}</div> 
           </el-form-item>
           <el-form-item label='所在河流：' label-width="260px"  class="conWidth" prop="inRivers">
               <el-input v-model.number="editForm.inRivers" placeholder="请输入内容"></el-input>
           </el-form-item>
           <el-form-item label='保护面积（万亩）：' label-width="260px"  class="conWidth" prop="protectArea">
               <el-input   v-model.number="editForm.protectArea" placeholder="请输入内容"></el-input>
           </el-form-item>
           <el-form-item label='保护耕地面积（万亩）：' label-width="260px" class="conWidth" prop="protectCultivateArea" >
               <el-input   v-model.number="editForm.protectCultivateArea" placeholder="请输入内容"></el-input>
           </el-form-item>
           <el-form-item  label='保护（受益）人口（万人）：' label-width="260px" class="conWidth" prop="protectPeople">
               <el-input  v-model.number="editForm.protectPeople" placeholder="请输入内容"></el-input>
           </el-form-item>
           <el-form-item label='堤线长度（km）：' label-width="260px" class="conWidth" prop="dikeLength">
               <el-input   v-model.number="editForm.dikeLength" placeholder="请输入内容"></el-input>
           </el-form-item>
           <el-form-item label='批复治理长度（km）：' label-width="260px" class="conWidth posiSpan" prop="governDiskLength">
               <el-input  v-model.number="editForm.governDiskLength" placeholder="请输入内容"></el-input>
           </el-form-item>
           <el-form-item label='可研-批复文件：'>
              <el-upload
                  :show-file-list = false
                  class="upload-demo"
                  :action="address"
                  :on-success="succNotice"
                  :with-credentials="true"
                   :data="upload1"
                  >
                  <el-button size="small" type="primary">上传可研批复文件</el-button> 
                </el-upload>
                <a :href="file1[0].url" class="downlink">{{file1[0].name}}</a>
           </el-form-item>
           <el-form-item label='可研-估算表：'>
              <el-upload
                  :show-file-list = false
                  class="upload-demo"
                  :action="address"
                  :on-success="succNotice"
                  :data="upload2"
                  :with-credentials="true"
                  >
                  <el-button size="small" type="primary">上传可研估算表</el-button>  
                </el-upload><a :href="file2[0].url" class="downlink">{{file2[0].name}}</a>
           </el-form-item>
           <el-form-item label='初设-批复文件：'>
              <el-upload
                  :show-file-list = false
                  class="upload-demo"
                  :action="address"
                  :on-success="succNotice"
                  :data="upload3"
                  :with-credentials="true">
                  <el-button size="small" type="primary">上传初设批复文件</el-button>
                   </el-upload><a :href="file3[0].url" class="downlink">{{file3[0].name}}</a>
           </el-form-item>
           <el-form-item label='初设-概算表：'>
              <el-upload
                  :show-file-list = false
                  class="upload-demo"
                  :action="address"
                  :on-success="succNotice"
                  :data="upload4"
                  :with-credentials="true">
                  <el-button size="small" type="primary">上传初设概算表</el-button> 
                </el-upload><a :href="file4[0].url" class="downlink">{{file4[0].name}}</a>
           </el-form-item>
           <el-form-item label="备注：" class="conWidth mark">
             <el-input type="textarea"
              v-model="editForm.note"
              class="markWid"
             :autosize="{ minRows: 4,maxRows:20}"></el-input>
           </el-form-item>
      </el-form>
      <div slot="footer" class="footer">
              <el-button type="primary" @click="addNewItemS('editForm')">确认修改</el-button>
      </div>
  </div>
</template>
<script>
export default {
  
  data(){
     //检验是否是数字
        // var checkNumber = (rule,value,callback)=>{
        //     console.log(value)
        //    var val =typeof(value)=='string'?value.replace(/\s/g,""):val
        //     console.log(val)
        //   if(val==''){
        //     return callback(new Error('请填入数据'))
        //   }else{ 
        //       val = Number(val)
        //       if(val!==0&&!val){
        //         return callback(new Error('请填入正确的数据'))
        //         }else{
        //           return callback()
        //         }
        //   }
        //  }
      return{
        editForm: {
            city:'',
            county:'',
            dikeName:'',
            inRivers:'',
            protectArea:'',
            protectCultivateArea:'',
            protectPeople:'',
            dikeLength:'',
            governDiskLength:'',
            note:'',
            dikeCode:'',
        },
        rules:{
            inRivers:[{ required: true, trigger: 'blur' }],
            protectArea:[{type:'number', required: true, trigger: 'blur',message:'请输入合理数据' }],
            protectCultivateArea:[{type:'number', required: true, trigger: 'blur',message:'请输入合理数据' }],
            protectPeople:[{type:'number', required: true, trigger: 'blur',message:'请输入合理数据' }],
            dikeLength:[{type:'number', required: true, trigger: 'blur',message:'请输入合理数据' }],
            governDiskLength:[{type:'number', required: true, trigger: 'blur',message:'请输入合理数据' }],
        },
        file1:[{name:'',url:''}],
        file2:[{name:'',url:''}],
        file3:[{name:'',url:''}],
        file4:[{name:'',url:''}],  
        fileList:[],      
        url1:'',
        url2:'',
        url3:'',
        url4:'',
       //四个上传所需要上传的参数 
        upload1:{
          code:'1',
          dikeCode:''
        },
        upload2:{
         code:'2',
         dikeCode:''
       },
        upload3:{
         code:'3',
         dikeCode:''
       },
        upload4:{
         code:'4',
         dikeCode:''
       },
        address:'', 
      
      }
  },
  methods:{
     //增加及编辑数据点击确定按钮
       addNewItemS(editForm){
            var _this = this
            this.$refs[editForm].validate((valid) => {
             if (valid) {
               editForm = _this[editForm]     
               _this.$axios.post('/dikeInfo/modified1dikeinfo',this.editForm).then(function(res){
                  var mes = res.data.responseMessage
                  if(mes=='修改成功'){
                   _this.$message({
                      message: _this.editForm.dikeName+'信息修改成功',
                      type: 'success'
                    })
                    _this.$router.push({name:'jectbase'})
                    }else{
                      _this.$message({
                      message: _this.editForm.dikeName+'信息'+mes,
                    })
                    }
                }).catch(function(err){
                   _this.$message({
                      message: '请填写合理及完整的数据，如必须为数字',
                      type: 'error'
                    });
                })
                   } else {
                   return false;
                  }
               })
       },
       //上传成功或者失败提示
     succNotice(response,file,fileList){
       var mes = response.responseMessage
       if(mes=='文件上传成功'){
        this.$message({
             message: mes,
             type: 'success'
           });
         var code  = response.responseData.code
         var path = response.responseData.path
         var url = this.$axios.defaults.baseURL+'/dikeInfo/file/downloaddikeinfo/?path='
         var files = `file${code}`
         this[files][0].name = file.name
         this[files][0].url = url+path
         fileList=null
       }else{
         this.$message({
             message: mes,
             type: 'warning'
           });
       }
     },
     //初始化四个文件的 显示
     getFile(editForm){
       var url = this.$axios.defaults.baseURL+'/dikeInfo/file/downloaddikeinfo/?path='
       if(editForm.feasibleDocument){
          var arr1 =editForm.feasibleDocument.split('/')
          var file1 = arr1[arr1.length-1] 
          this.file1[0].name = file1
          this.file1[0].url =url+editForm.feasibleDocument
       }else{
          this.file1[0].name = ''
          this.file1[0].url = null
       }
       if(editForm.feasibleTable){
          var arr2 =editForm.feasibleTable.split('/')
          var file2 = arr2[arr2.length-1]
          this.file2[0].name = file2
          this.file2[0].url = url+editForm.feasibleTable
       }else{
          this.file2[0].name = ''
          this.file2[0].url = null
       }
       if(editForm.initDocument){
          var arr3 =editForm.initDocument.split('/')
          var file3 = arr3[arr3.length-1] 
          this.file3[0].name = file3
          this.file3[0].url = url+editForm.initDocument
       }else{
          this.file3[0].name = ''
          this.file3[0].url = null
       }
       if(editForm.initTable){
         var arr4 = editForm.initTable.split('/') 
         var file4 = arr4[arr4.length-1] 
        this.file4[0].name = file4 
        this.file4[0].url = url+editForm.initTable
       }else{
          this.file4[0].name = ''
          this.file4[0].url = null
       }     
     },
  },
  mounted(){
    var dikeCode = this.$route.params.dikeCode;
    var addressurl =this.$axios.defaults.baseURL+"/dikeInfo/file/uploaddikeinfo/"
    //请求数据初始化
    var _this = this
    var thisDate = (new Date()).getTime()
    this.$axios.get(`/dikeInfo/getdikeinfobycode/${dikeCode}`,{params:{
      thisDate:thisDate}
    }).then(function(res){
       var codeMes = res.data.responseCode
         if(codeMes=='101'){
             _this.$router.push({name:'login'})
          }else{
        var data  = res.data.responseData
        _this.editForm = data
        _this.getFile(_this.editForm)
        }
    }).catch(function(err){
      console.log(err)
    })
    //初始化地址及四个参数中的dikecode
     this.address = addressurl+dikeCode
     this.upload1.dikeCode = dikeCode;
     this.upload2.dikeCode = dikeCode;
     this.upload3.dikeCode = dikeCode;
     this.upload4.dikeCode = dikeCode;     
  }
}
</script>
<style>

</style>

<style scoped>
h2{
  height: 100px;
  line-height:100px;
}
.el-form{
  margin: 0 auto;
}
.el-form-item{
  width:45%;
  float: left;
  margin-left:5%;
  position: relative;
}
.el-form-item .Wid{
  width:150px;
  float: left;
  text-align:right
}
.el-form-item__content .el-input,
.el-form-item__content .el-select,
.el-form-item__content .el-textarea{
  width: 150px;
  float: left;
  }
  .zhCspan1{
    position: absolute;
    top:18px;
    left: -18px;
    font-size:12px
  }
  .footer{
    height: 100px;
    position: relative;
    width:90%;
    margin:0 auto;
  }
  .notice{
    position: absolute;
    color:red;
    font-size:14px;
    top:-10px;
    left: 70px;
    
  }
  .clearfix:after{
    content:'';
    clear: both;
    height: 0;
    display: block;
      }
  .downlink{
    width:60%;
    display: inline-block;
    text-decoration:none;
    /* padding-left:14% */
  }
  .markWid{
    width:300px!important;
  }
</style>


